<template>
    <div id="post">
        <div class="search disFlex">
            <img :src="require('@/assets/images/leftback_black.png')" alt="" @click="goback">
            <van-search class="post_search" v-model="searchVal" show-action placeholder="期望行业" @search="onSearch"
                @cancel="onCancel" />
        </div>
        <div class="top" :style="activeList.length > 0? 'padding-bottom:1.14rem' : 'padding-bottom: 0'">
            <van-sidebar class="sidebar floatL" v-model="active" @change="onChange">
                <van-sidebar-item v-for="(item, i) in nav" :key="i" :title="item.chName" />
            </van-sidebar>
            <div class="content_width floatL">
                <div v-for="(item, i) in list" :key="i">
                    <div class="font32 fontBlack2 content_title post_content">{{ item.chName }}</div>
                    <div :class="isActive(activeList, itm.chName) ? 'active': ''" @click="selectItm(itm)" class="floatL content_select" v-for="(itm, inx) in item.children"
                        :key="inx">
                        {{ itm.chName }}
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div v-if="activeList.length > 0" class="bottom1">
            <div class="select_flex">
                <div class="font24 fontBlack73">已选</div>
                <div class="over">
                    <div class="pd1" v-for="(item, i) in activeList" :key="i">
                        <div class="disFlex select">
                            <span class="font24 fontGreenBlue">{{item.twoname}}</span>
                            <img @click="del(i)" :src="require('@/assets/images/select_close.png')" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div @click="sub" class="font24 fontGreenBlue">确定</div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/header.vue'
import { Toast } from 'vant'
import { getCurrentInstance, reactive } from 'vue'
export default {
    components: {
        Header
    },
    data() {
        return {
            searchVal: '',
            nav: [],
            active: 0,
            list: [],
            api: '',
            allList:[],
            activeList: [],
            item: {}, //当前选择的一级列表
        }
    },
    created() {
        this.api = getCurrentInstance().appContext.config.globalProperties.$http;
        var that = this;
        that.api.get('/personnel/h5/resumeInfo/getPostDictTree', {}).then(res => {
            var data = res.data;
            var arr = [];
            for(let i = 0; i < data.length; i++) {
                var obj = {};
                obj.chName = data[i].chName;
                obj.code = data[i].code;
                if(obj.chName != '全部行业') {
                    arr.push(obj);
                    that.allList.push(data[i]);
                }
            };
            that.nav = arr;
            var datacode = that.$store.state.resumeIndustryInfoList;
            var dataname = that.$store.state.resumeName;
            if(datacode.length > 0) {
                var active = [];
                for(let i = 0; i < datacode.length; i++) {
                    var obj = {};
                    obj.onecode = datacode[i].oneLevel;
                    obj.twocode = datacode[i].twoLevel;
                    active.push(obj);
                };
                for(let i = 0; i < dataname.length; i++) {
                    active[i].onename = dataname[i].onename;
                    active[i].twoname = dataname[i].twoname;
                };
                that.activeList = active;
            }
            that.item = that.nav[0];
            var arr1 = [];
            that.allList[0].children.forEach((el, i) => {
                var obj = {};
                obj.chName = el.chName;
                obj.children = [];
                el.children.forEach((val, i) => {
                    var select = {};
                    select.chName = val.chName;
                    select.code = val.code;
                    obj.children.push(select);
                });
                arr1.push(obj);
            });
            that.list = arr1; 
        });
    },
    methods: {
        goback() {
            this.$router.replace('/intention');
        },
        // 删除某一个选项
        del(i) {
            this.activeList.splice(i, 1);
        },
        // 判断是否存在值
        isActive(arr, data) {
            var is = false;;
            for(let i = 0; i < arr.length; i++) {
                is = arr[i].twoname === data ? true : is;
            }
            return is;
        },
        //搜索
        onSearch(val) {
            var searchVal = this.nav.filter(function (el) {
                return Object.keys(el).some(function (key) {
                //搜索所有的内容
                return String(el[key]).toLowerCase().indexOf(val) > -1;
                })
            })
            for(let i = 0; i < this.nav.length; i++) {
                if(this.nav[i].code == searchVal[0].code) {
                    this.active = i;
                    this.onChange(i);
                }
            }
        },
        // 清空搜索内容
        onCancel() {
            this.searchVal = '';
        },
        onChange(index) {
            var that = this;
            that.item = that.nav[index];
            that.list = [];
            var arr1 = [];
            that.allList[index].children.forEach((el, i) => {
                var obj = {};
                obj.chName = el.chName;
                obj.children = [];
                el.children.forEach((val, i) => {
                    var select = {};
                    select.chName = val.chName;
                    select.code = val.code;
                    obj.children.push(select);
                });
                arr1.push(obj);
            });
            that.list = arr1;
        },
        selectItm(item) {
            var obj = {};
            obj.twoname = item.chName;
            obj.twocode = item.code;
            obj.onename = this.item.chName;
            obj.onecode = this.item.code;
            var data = this.activeList;
            var is = false;// 是否在数组里存在此条数据
            var inx; //如果存在，具体的index
            for(let i = 0; i < data.length; i++) {
                if(data[i].twoname == item.chName) {
                    is = true;
                    inx = i;
                }
            }
            if(is == true) { //如果存在
                this.activeList.splice(inx, 1);
            } else {
                this.activeList.push(obj);
            }
        },
        // 确定已选择
        sub() {
            var arr = [];
            var arr1 = [];
            for(let i = 0; i < this.activeList.length; i++) {
                var obj = {};
                obj.oneLevel = this.activeList[i].onecode;
                obj.twoLevel = this.activeList[i].twocode;
                arr.push(obj);
                var obj1 = {};
                obj1.onename = this.activeList[i].onename;
                obj1.twoname = this.activeList[i].twoname;
                arr1.push(obj1);
            }
            this.$store.commit('setresumeIndustryInfoList', arr);
            this.$store.commit('setresumeName', arr1);
            this.$router.replace('/intention');
        }
    }
}
</script>
<style src="@/assets/css/trade.css">
</style>
<style scoped>
#post {
    width: 100%;
    height: 100%;
}

.search {
    padding: 0 0.32rem;
    padding-top: 0.88rem;
    position: fixed;
    top: 0;
    background: white;
    z-index: 33;
    border-bottom: 0.02rem solid #E8E9EC;
}

.search img {
    width: 0.48rem;
}

.flex {
    display: flex;
}

.sidebar {
    width: 30%;
}

.post_content {
    padding: 0.32rem;
}

.content_title {
    padding-bottom: 0.16rem;
}

.content_select {
    width: 1.4rem;
    text-align: center;
    padding: 0.06rem 0.2rem;
    background: #E8E9EC;
    border-radius: 0.08rem;
    font-size: 0.24rem;
    margin-left: 0.32rem;
    margin-top: 0.16rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.content_width {
    width: 69%;
}
.bottom1 {
    position: fixed;
    bottom: 0;
    height: 1.14rem;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.32rem;
    border-top: 0.02rem solid #E8E9EC;
}
.select {
    margin-left: 0.16rem;
    padding: 0.06rem 0.12rem;
    border: 0.02rem solid #428FFC;
    border-radius: 0.08rem;
}
.select img {
    width: 0.24rem;
    margin-left: 0.12rem;
}
.select_flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.pd1 {
    padding: 0.1rem 0;
}
.over {
    overflow: scroll;
    max-height: 1.16rem;
    padding: 0.1rem;
    max-width: 5.5rem;
}
.over div {
    display: inline-block;
}
.top {
    position: relative;
    top: 1.92rem;
}
.active {
    background: #428FFC;
    color: white;
}
</style>